<template>
    <div class="white-box">
        <div class="task-one">
            <div class="task-one__item">
                <span class="task-one__label">订单编号：</span>
                <el-input placeholder="输入订单编号" v-model.trim="order_sn" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">会员UID：</span>
                <el-input placeholder="输入会员UID" v-model.trim="user_id" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">商户单号：</span>
                <el-input placeholder="输入商户单号" v-model.trim="trade_no" clearable></el-input>
            </div>
            <!-- <div class="task-one__item">
                <span class="task-one__label">收货人：</span>
                <el-input placeholder="输入收货人" v-model.trim="addressee" clearable></el-input>
            </div> -->
            <div class="task-one__item">
                <span class="task-one__label">发货日期：</span>
                <el-date-picker
                    v-model="area_time"
                    type="daterange"
                    unlink-panels
                    value-format="YYYY-MM-DD"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                />
            </div>
            <div class="task-one__item">
                <span class="task-one__label">下单时间：</span>
                <el-date-picker
                    v-model="pay_time"
                    type="daterange"
                    unlink-panels
                    value-format="YYYY-MM-DD"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                />
            </div>
            <div class="task-one__btn task-wrap-btn clearfix">
                <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">搜索</el-button>
                <el-button type="default" @click="clickImportOrder">订单导出</el-button>
                <el-button type="default" @click="clickTemplate">快递发货</el-button>
            </div>
        </div>
        <div class="table-mb"></div>
        <el-tabs v-model="tabName" type="card" @tab-click="handleTab">
            <el-tab-pane :label="`${tab_item.label}(${tab_item.nums})`" :name="tab_item.name" v-for="tab_item in tabarr" :key="tab_item.name">
                <div class="table-mb">
                    <el-button type="default" @click="clickDeliver(2)" v-if="tabName >= 2 && tabName <= 6"> 批量标记发货 </el-button>
                </div>
                <div class="table-head flexs">
                    <div class="table-check">
                        <el-checkbox v-model="allChecked" @change="changeAll" v-if="tabName >= 2 && tabName <= 6" />
                    </div>
                    <div class="table-good table-head-base">商品信息</div>
                    <div class="table-price table-head-base">合计价格</div>
                    <div class="table-pay-type table-head-base">支付方式</div>
                    <div class="table-buy-info table-head-base">买家信息</div>
                    <div class="table-oper table-head-base">操作</div>
                </div>
                <!-- 内容 -->
                <div class="table-body" v-loading="loading">
                    <template v-if="arr_data.length > 0 && !loading">
                        <div class="table-item" v-for="(item, index) in arr_data" :key="item.order_id">
                            <div class="table-item-head flexs">
                                <div class="table-item__head-left">
                                    <div class="table-check" style="margin-right: 12px">
                                        <el-checkbox v-model="item.is_select" @change="changeOne" v-if="tabName >= 2 && tabName <= 6" />
                                    </div>
                                    <p class="item-head__sn" v-if="item.order_status != 0">货位号：{{ item.shelve_title + item.shelve_num }}</p>
                                    <p class="item-head__sn">订单编号：{{ item.order_sn }}</p>
                                    <p class="item-head__sn">商户单号：{{ item.trade_no }}</p>
                                    <p class="item-head__text">下单时间：{{ item.created_at_label }}</p>
                                    <p class="item-head__text">
                                        订单状态：<span>{{ item.order_status_label }}</span>
                                    </p>
                                </div>
                                <div class="table-item__head-right"></div>
                            </div>
                            <div class="table-item-cont">
                                <div class="table-good table-head-base item-cont__base" :style="{ paddingBottom: item.goodMoreSwitch ? '2px' : '8px' }">
                                    <div class="table-sub">
                                        <el-collapse-transition>
                                            <div :style="{ marginLeft: 0, height: !item.showGoodMoer && item.goodMoreSwitch ? '190px' : 'auto' }">
                                                <div
                                                    class="table-lr"
                                                    style="margin-bottom: 0px"
                                                    v-for="(sub, subIndex) in item.order.order_product"
                                                    :key="sub.product_id"
                                                >
                                                    <div class="table-lr__right table-right-other">
                                                        <p class="lr-user" styly="margin-bottom:0">
                                                            {{ sub.product_name }}，
                                                            <span>等级: {{ sub.level }}，数量: {{ sub.product_number }}{{ sub.unit }}，</span>
                                                            <span><em>￥</em>{{ sub.product_price }}</span
                                                            >，<span>供应价: <em>￥</em>{{ sub.cost_price }}</span
                                                            >，<span
                                                                >状态: <span style="color: #4b93fa">{{ orderStatusLbel[sub.status].title }}</span></span
                                                            >
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </el-collapse-transition>
                                        <!-- 显示更多 -->
                                        <div class="good-more" v-if="item.goodMoreSwitch">
                                            <p class="good-more_line flexs-center" @click.stop="clickMore(item)">
                                                <el-icon :size="18" color="#333" :class="{ 'good-more-icon': item.showGoodMoer }"><ArrowDown /></el-icon
                                                ><span>{{ item.showGoodMoer ? "隐藏更多" : "显示更多" }}</span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-price table-head-base item-cont__base">
                                    <div class="table-sub">
                                        <!-- <p class="table-sub__p-mb">余额抵扣：<em style="font-size: 13px">￥</em>{{ item.money }}</p> -->
                                        <p class="table-sub__p-mb">
                                            预收包装费：<em style="font-size: 13px">￥</em>{{ item.order ? item.order.pre_pack_amount : 0 }}
                                        </p>
                                        <p class="table-sub__p-mb">
                                            预收运费：<em style="font-size: 13px">￥</em>{{ item.order ? item.order.pre_freight : 0 }}
                                        </p>
                                        <p class="table-sub__p-mb">订单总额：<em style="font-size: 13px">￥</em>{{ item.total_price }}</p>
                                    </div>
                                </div>
                                <div class="table-pay-type table-head-base item-cont__base">
                                    <div class="table-sub">
                                        <p class="table-sub__p-mb">优惠金额：<em style="font-size: 13px">￥</em>{{ item.youhui_amount }}</p>
                                        <p class="table-sub__p-mb">实付金额：<em style="font-size: 13px">￥</em>{{ item.amount }}</p>
                                        <p class="table-sub__p-mb">支付方式：{{ item.pay_code }}</p>
                                    </div>
                                </div>
                                <div class="table-buy-info table-head-base item-cont__base">
                                    <div class="table-sub">
                                        <div class="table-lr">
                                            <el-image
                                                class="table-lr__img img-round"
                                                loading="lazy"
                                                :src="proxy.imgUrl + item.face + '!img_400'"
                                                fit="cover"
                                                v-if="item.face"
                                            />
                                            <div class="table-lr__right">
                                                <p class="lr-user table-sub__p-mb">姓名：{{ item.contact }}[UID: {{ item.uid }}]</p>
                                                <p class="lr-user table-sub__p-mb">电话：{{ item.mobile }}</p>
                                                <!-- <div class="lr-user lr-addr">
                                                <span class="lr-addr__left">地址：</span>
                                                <p class="lr-detail line-two">{{ item.addr + item.house }}</p>
                                            </div> -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-oper table-head-base">
                                    <div class="table-sub table-sub-btn">
                                        <el-button link type="primary" class="theme-btn" @click="clickDetail(item)">查看详情</el-button>
                                        <!-- <el-button link type="primary" class="theme-btn" @click="clickUpdatePrice(item)" v-if="item.order_status == 0">
                                        修改价格
                                    </el-button> -->
                                        <!-- <el-button
                                        link
                                        type="primary"
                                        class="theme-btn"
                                        @click="clickEditAddr(item)"
                                        v-if="item.order_status == 1 || item.order_status == 3"
                                    >
                                        修改地址
                                    </el-button> -->
                                        <!-- <el-button link type="primary" class="theme-btn" @click="clickReceive(item)" v-if="item.order_status == 6">
                                            标记收货
                                        </el-button> -->
                                        <el-button
                                            link
                                            type="primary"
                                            class="theme-btn"
                                            @click="clickDeliver(1, item)"
                                            v-if="item.order_status >= 2 && item.order_status <= 6"
                                        >
                                            标记发货
                                        </el-button>
                                        <el-button
                                            link
                                            type="primary"
                                            class="theme-btn"
                                            @click="clickRemark(item)"
                                            v-if="item.order_status > 0 && item.order_status < 9"
                                        >
                                            设平台备注
                                        </el-button>
                                        <el-button
                                            link
                                            type="primary"
                                            class="theme-btn"
                                            @click="clickAsk(item)"
                                            v-if="item.order_status > 0 && item.order_status < 7"
                                        >
                                            设物流要求
                                        </el-button>
                                        <el-button
                                            link
                                            type="primary"
                                            class="theme-btn"
                                            @click="clickLogistics(item)"
                                            v-if="item.order_status > 0 && item.order_status < 7"
                                        >
                                            设物流公司
                                        </el-button>
                                        <el-button
                                            link
                                            type="primary"
                                            class="theme-btn"
                                            @click="clickCancel(item)"
                                            v-if="item.order_status <= 5 && item.order_status != -1 && item.order_status != -2"
                                        >
                                            退款退货
                                        </el-button>
                                        <el-popconfirm
                                            title="删除后订单将不会再显示？"
                                            confirm-button-text="确定"
                                            cancel-button-text="取消"
                                            @confirm="clickDel(item)"
                                        >
                                            <template #reference>
                                                <el-button link type="primary" class="theme-btn">删除</el-button>
                                            </template>
                                        </el-popconfirm>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                    <div class="table-body__none" v-if="arr_data.length == 0 && !loading">暂无数据</div>
                </div>

                <!-- 分页 -->
                <el-pagination
                    background
                    v-model:current-page="page"
                    v-model:page-size="pageSize"
                    :page-sizes="pageSizeNum"
                    :total="totalNums"
                    layout="total, sizes, prev, pager, next, jumper"
                >
                </el-pagination>
            </el-tab-pane>
        </el-tabs>

        <!-- 设物流公司 -->
        <el-dialog v-model="dialogLogistics" title="设物流公司" width="560px" :append-to-body="true" :destroy-on-close="true" @close="closeLogistics">
            <div class="tag-item">
                <div class="tag-item__label">订单ID</div>
                <div class="tag-item__right">{{ orderObj.order_id }}</div>
            </div>
            <div class="tag-item">
                <div class="tag-item__label">订单编号</div>
                <div class="tag-item__right">{{ orderObj.order_sn }}</div>
            </div>
            <div class="tag-item">
                <div class="tag-item__label">选择物流公司</div>
                <div class="tag-item__right">
                    <el-select v-model="company_id" placeholder="请选择物流公司">
                        <el-option :label="item.title" :value="item.company_id" v-for="item in companyArrs" :key="item.company_id" />
                    </el-select>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" :loading="form_loading" @click="confirmLogistics">确认</el-button>
                    <el-button @click="closeLogistics">取消</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 取消 -->
        <el-dialog v-model="dialogCancel" title="退款退货" :append-to-body="true" :destroy-on-close="true" width="600px" @close="closeCancel">
            <div class="tag-item">
                <div class="tag-item__label">订单ID</div>
                <div class="tag-item__right">{{ orderObj.order_id }}</div>
            </div>
            <div class="tag-item">
                <div class="tag-item__label">订单编号</div>
                <div class="tag-item__right">{{ orderObj.order_sn }}</div>
            </div>
            <div class="tag-item" style="align-items: flex-start">
                <div class="tag-item__label">退款/货原因</div>
                <div class="tag-item__right">
                    <el-input v-model.trim="cancel_remark" :rows="4" type="textarea" clearable placeholder="请输入退款/货原因" />
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" :loading="form_loading" @click="confirmCancel">确认</el-button>
                    <el-button @click="closeCancel">取消</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 设置平台备注 -->
        <el-dialog v-model="dialogRemark" title="设置平台备注" :append-to-body="true" :destroy-on-close="true" width="600px" @close="closeRemark">
            <div class="tag-item">
                <div class="tag-item__label">订单ID</div>
                <div class="tag-item__right">{{ orderObj.order_id }}</div>
            </div>
            <div class="tag-item">
                <div class="tag-item__label">订单编号</div>
                <div class="tag-item__right">{{ orderObj.order_sn }}</div>
            </div>
            <div class="tag-item" style="align-items: flex-start">
                <div class="tag-item__label">平台备注</div>
                <div class="tag-item__right">
                    <el-input v-model.trim="sys_remark" :rows="4" type="textarea" clearable placeholder="请输入平台备注" />
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" :loading="form_loading" @click="confirmRemark">确认</el-button>
                    <el-button @click="closeRemark">取消</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 设置物流要求 -->
        <el-dialog v-model="dialogAsk" title="设置物流要求" :append-to-body="true" :destroy-on-close="true" width="600px" @close="closeAsk">
            <div class="tag-item">
                <div class="tag-item__label">订单ID</div>
                <div class="tag-item__right">{{ orderObj.order_id }}</div>
            </div>
            <div class="tag-item">
                <div class="tag-item__label">订单编号</div>
                <div class="tag-item__right">{{ orderObj.order_sn }}</div>
            </div>
            <div class="tag-item">
                <div class="tag-item__label">物流要求</div>
                <div class="tag-item__right">
                    <el-radio-group v-model="ask_type">
                        <el-radio label="0">早班</el-radio>
                        <el-radio label="1">中班</el-radio>
                        <el-radio label="2">晚班</el-radio>
                    </el-radio-group>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" :loading="form_loading" @click="confirmAsk">确认</el-button>
                    <el-button @click="closeAsk">取消</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 快递发货 -->
        <el-dialog
            v-model="dialogImportGoods"
            title="快递发货导出/导入"
            width="700px"
            :append-to-body="true"
            :destroy-on-close="true"
            :close-on-click-modal="false"
        >
            <div>
                <p class="kd-h3">导出筛选条件</p>
                <div class="task-one">
                    <div class="task-one__item">
                        <span class="task-one__label">订单日期：</span>
                        <el-date-picker
                            v-model="order_time"
                            type="date"
                            value-format="YYYY-MM-DD"
                            :disabled-date="disabledDate"
                            placeholder="请选择日期"
                            style="width: 190px"
                        />
                        <p class="kd-tips">下载模板时订单日期必填</p>
                    </div>
                    <div class="task-one__item">
                        <span class="task-one__label">订单编号：</span>
                        <el-input placeholder="输入订单编号" v-model.trim="kd_order_sn" clearable></el-input>
                    </div>
                    <div class="task-one__item">
                        <span class="task-one__label" style="margin-right: 4px">会员UID：</span>
                        <el-input placeholder="输入会员UID" v-model.trim="kd_user_id" clearable></el-input>
                    </div>
                </div>
                <div class="dialog-h3">
                    <p class="dialog-h3-title">提示：</p>
                    <p>1、模板中的表头不可更改，表头行不可删除;</p>
                    <p>2、导入数据模板时请先<span class="span-down" @click="downExcel">下载模板</span>，在模板中按字段填写信息，然后上传该文件.</p>
                    <p>3、文件大小不超过10MB;</p>
                    <p>4、限制导入10000行记录，超出部分请分多次导入。</p>
                </div>
                <el-upload
                    ref="uploadFileRef"
                    accept=".xlsx,.xls,.csv"
                    :file-list="fileList_two"
                    :action="actionImgUrl()"
                    :auto-upload="false"
                    :limit="1"
                    :on-exceed="handleExceed_two"
                    :on-remove="handleRemove_two"
                    :on-change="fileChange_two"
                >
                    <template #trigger>
                        <el-button type="primary">选择文件</el-button>
                    </template>
                    <el-button class="downs" type="warning" :loading="btn_loading" @click.stop="uploadFile">上传导入</el-button>
                </el-upload>
            </div>
        </el-dialog>

        <!-- 修改价格 -->
        <!-- <el-dialog v-model="dialogPrices" title="修改价格" :append-to-body="true" :destroy-on-close="true" width="600px">
            <div class="tag-item">
                <div class="tag-item__label">订单金额</div>
                <div class="tag-item__right"><em style="font-size: 13px">￥</em>{{ orderObj.amount }}</div>
            </div>
            <div class="tag-item">
                <div class="tag-item__label">修改金额</div>
                <div class="tag-item__right">
                    <el-input v-model.trim="order_price" oninput="value=value.replace(/[^\d.]/g,'')" clearable placeholder="请输入修改的金额" />
                </div>
            </div>
            <div class="tag-item" style="align-items: flex-start">
                <div class="tag-item__label">订单备注</div>
                <div class="tag-item__right">
                    <el-input v-model.trim="order_remark" :rows="4" type="textarea" clearable placeholder="请输入订单备注" />
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" :loading="form_loading" @click="confirmPrice">确认</el-button>
                    <el-button @click="dialogPrices = false">取消</el-button>
                </span>
            </template>
        </el-dialog> -->

        <!-- 修改地址 -->
        <!-- <el-dialog v-model="dialogAddr" title="修改地址" width="560px" :append-to-body="true" :destroy-on-close="true" @close="closeAddr">
            <el-form ref="ruleAddrRef" :model="ruleAddrForm" :rules="ruleCheckAddr" label-width="140px">
                <el-form-item label="联系人" prop="names">
                    <el-input v-model.trim="ruleAddrForm.names" clearable placeholder="请输入联系人" />
                </el-form-item>
                <el-form-item label="联系电话" prop="tel">
                    <el-input
                        v-model.trim="ruleAddrForm.tel"
                        oninput="value=value.replace(/[^\d-]/g,'')"
                        maxlength="11"
                        clearable
                        placeholder="请输入联系电话"
                    />
                </el-form-item>
                <el-form-item label="经纬度" prop="lat_lng">
                    <el-input
                        v-model.trim="ruleAddrForm.lat_lng"
                        readonly
                        :suffix-icon="ArrowRight"
                        placeholder="请选择当前位置的经纬度"
                        clearable
                        @click="clickLatAndLng"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="所在地区" prop="area_code">
                    <el-cascader
                        ref="cascaderRef"
                        v-model="ruleAddrForm.area_code"
                        :props="props"
                        :options="allArea"
                        clearable
                        placeholder="请选择省市区"
                    />
                </el-form-item>
                <el-form-item label="详细地址" prop="house">
                    <el-input v-model.trim="ruleAddrForm.house" :rows="2" type="textarea" clearable placeholder="请输入详细地址" />
                </el-form-item>
                <el-form-item>
                    <div class="flexs" style="margin-top: 20px">
                        <el-button type="primary" :loading="form_loading" @click="submitFormAddr(ruleAddrRef)">确认修改</el-button>
                        <el-button @click="resetFormAddr(ruleAddrRef)">重置</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog> -->

        <!-- 获取经纬度 -->
        <el-dialog v-model="dialogMap" title="获取经纬度" width="600px" :close-on-click-modal="false" :append-to-body="true" :destroy-on-close="true" draggable>
            <div class="p16">
                <div class="task-one">
                    <div class="task-one__item">
                        <span class="task-one__label">地址：</span>
                        <el-input placeholder="输入地址获取经纬度" v-model.trim="addrs" clearable style="width: 280px"></el-input>
                    </div>
                    <div class="task-one__btn">
                        <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearchMap">获取</el-button>
                    </div>
                </div>
                <div id="container"></div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="confirmMap">确认地址</el-button>
                    <el-button @click="dialogMap = false">取消</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch, onBeforeUnmount } from "vue"
import { useRouter, useRoute, onBeforeRouteLeave } from "vue-router"
import { Search, ArrowDown, ArrowUp } from "@element-plus/icons-vue"
import { useBaseStore } from "@store/base"
import { genFileId } from "element-plus"
import { jsonp } from "vue-jsonp"
import OneLoad from "@mixins/one-load"
import GoBack from "@components/GoBack.vue"

const store = useBaseStore()
const router = useRouter()
const route = useRoute()
const { proxy } = getCurrentInstance()

let querys = route.query
onMounted(() => {
    if (Object.keys(querys).length > 0) {
        tabName.value = querys.cur
        status.value = querys.status
    }
    getArea()

    getCount()
})

onBeforeUnmount(() => {
    // map = null
    // marker = null
    // cascaderRef.value = null
    // 移除绑定事件
    // window.removeEvent = function () {
    //     qq.maps.event.removeListener(eventDragend)
    //     eventDragend = null
    // }
})

// 离开-可以利用这个触发删除页面缓存操作
onBeforeRouteLeave((to, from, next) => {
    if (to.name === "OrderDetail") {
        store.setInclude("OrderList")
    } else {
        store.delInclude("OrderList")
    }
    next()
})

// 显示更多商品
const clickMore = (item) => {
    item.showGoodMoer = !item.showGoodMoer
}

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, search_btn, pubParams, pubRefreshParams, getdata } = OneLoad()

// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    page.value = val
    pubParams(getList)
})

const orderStatusLbel = {
    2: {
        status: 2,
        title: "已退款",
    },
    "-1": {
        status: -1,
        title: "已取消",
    },
    0: {
        status: 0,
        title: "待支付",
    },
    1: {
        status: 1,
        // title: "备货中(货架号待生成)",
        title: "货架号待生成",
    },
    2: {
        status: 2,
        title: "待质检",
    },
    3: {
        status: 3,
        title: "已质检",
    },
    4: {
        status: 4,
        // title: "已入位(待员工打包)",
        title: "待员工打包",
    },
    5: {
        status: 5,
        // title: "已打包(待员工发货)",
        title: "待员工发货",
    },
    6: {
        status: 6,
        // title: "已交货(待平台发货)",
        title: "待平台发货",
    },
    7: {
        status: 6,
        title: "待收货",
    },
    8: {
        status: 8,
        title: "已完成",
    },
    9: {
        status: 9,
        title: "已取消",
    },
}
function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
        status: status.value,
        from: "flower",
        order_sn: order_sn.value,
        // contact: addressee.value,
        uid: user_id.value,
        trade_no: trade_no.value,
        s_day: area_time.value ? area_time.value[0] : "", // 发货时间
        l_day: area_time.value ? area_time.value[1] : "",
        o_s_day: pay_time.value ? pay_time.value[0] : "", // 下单开始时间
        o_l_day: pay_time.value ? pay_time.value[1] : "",
    }
    getdata("order/index", params)
}

// 搜索
const order_sn = ref("")
const addressee = ref("")
const area_time = ref("")
const user_id = ref("")
const pay_time = ref("") // 下单时间
const trade_no = ref("") // 商户单号
const handleSearch = () => {
    search_btn.value = true
    allChecked.value = false
    getCount(2)
}

/**
 * tab切换
 * @param {String} status tab切换的类型值
 * @param {String} tabName 当前index
 * @param {Array} tabarr 数组
 */
const status = ref("0")
const tabName = ref("0")
const tabarr = ref([
    {
        label: "全部订单",
        name: "0",
        status: "0",
        nums: 0,
    },
    {
        label: "待付款",
        name: "1",
        status: "1",
        nums: 0,
    },
    {
        label: "待质检",
        name: "2",
        status: "2",
        nums: 0,
    },
    {
        label: "待放货",
        name: "3",
        status: "3",
        nums: 0,
    },
    {
        label: "待打包",
        name: "4",
        status: "4",
        nums: 0,
    },
    {
        label: "待发货",
        name: "5",
        status: "5",
        nums: 0,
    },
    {
        label: "待平台发货",
        name: "6",
        status: "6",
        nums: 0,
    },
    {
        label: "待收货",
        name: "7",
        status: "7",
        nums: 0,
    },
    {
        label: "已完成",
        name: "8",
        status: "8",
        nums: 0,
    },
    {
        label: "已取消",
        name: "9",
        status: "9",
        nums: 0,
    },
])
const handleTab = (pane) => {
    status.value = tabarr.value[pane.index].status
    allChecked.value = false
    getCount(2)
}
function getCount(type = 1) {
    proxy.$axios
        .get("order/tongji", {
            params: {
                from: "flower",
            },
        })
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                tabarr.value[0].nums = result.total_count
                tabarr.value[1].nums = result.wait_pay
                tabarr.value[2].nums = result.wait_quality_count
                tabarr.value[3].nums = result.wait_release_count
                tabarr.value[4].nums = result.wait_pack_count
                tabarr.value[5].nums = result.wait_delivery_count
                tabarr.value[6].nums = result.wait_peiing
                tabarr.value[7].nums = result.is_peiing
                tabarr.value[8].nums = result.finish_count
                tabarr.value[9].nums = result.cancel_count
                type == 1 && getList()
                type == 2 && pubRefreshParams(getList)
                type == 3 && pubParams(getList)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

const form_loading = ref(false) // 公共表单提交状态
const btn_loading = ref(false) // 公共表单提交状态
const orderObj = ref({}) // 订单项

/**
 * 表格操作
 * @param {Boolean} allChecked 全/反选值
 * @param {Array} ids 选中的值
 * @param {Function} changeAll 全/反选事件
 */
const allChecked = ref(false)
const ids = ref([])
const changeAll = (val) => {
    let arrs = []
    arr_data.value.map((item) => {
        item.is_select = val
        val && arrs.push(item.order_id)
    })
    ids.value = arrs
}
// 单选
const changeOne = () => {
    let flag = true,
        arrs = []
    for (let i = 0; i < arr_data.value.length; i++) {
        if (!arr_data.value[i].is_select) {
            flag = false
        } else {
            arrs.push(arr_data.value[i].order_id)
        }
    }
    allChecked.value = flag
    ids.value = arrs
}

/**
 * 修改价格-暂不做
 * @param {Boolean} dialogPrices 修改价格弹窗状态
 * @param {String} order_price 修改价格值
 * @param {String} order_remark 修改备注
 * @param {Function} confirmPrice 修改事件
 */
// const dialogPrices = ref(false)
// const order_remark = ref("")
// const order_price = ref("")
// const clickUpdatePrice = (item) => {
//     orderObj.value = item
//     dialogPrices.value = true
// }
// const confirmPrice = () => {
//     let regu = /^\d+(\.\d{1,2})?$/
//     if (order_price.value == "") {
//         proxy.$message({ message: "请输入需要修改的金额", type: "warning" })
//         return
//     }
//     if (!regu.test(order_price.value)) {
//         proxy.$message({ message: "格式为整数或小数(保留两位小数)", type: "warning" })
//         return
//     }
//     if (order_remark.value == "") {
//         proxy.$message({ message: "请输入备注", type: "warning" })
//         return
//     }
//     form_loading.value = true
//     proxy.$axios
//         .post("", {
//             order_id: orderObj.value.order_id,
//             price: order_price.value,
//             order_remark: order_remark.value,
//         })
//         .then((res) => {
//             form_loading.value = false
//             if (res.data.code == 0) {
//                 allChecked.value = false
//                 pubParams(getList)
//             } else {
//                 proxy.$message({message:res.data.msg,type:"error"})
//             }
//         })
//         .catch((err) => {
//             form_loading.value = false
//         })
// }

/**
 * 标记发货
 * @param {Number} type 1是单个标记，2是批量
 */
const clickDeliver = (type, item) => {
    if (ids.value.length == 0 && type == 2) {
        proxy.$message({ message: "请选择需要发货的订单", type: "warning" })
        return
    }
    let data = {}
    if (type == 1) {
        data.order_id = item.order_id
    } else {
        data.order_ids = ids.value
    }
    let urls = type == 1 ? "order/delivery" : "order/batchDelivery"
    form_loading.value = true
    proxy.$axios
        .post(urls, data)
        .then((res) => {
            form_loading.value = false
            if (res.data.code == 0) {
                proxy.$message({ message: "标记发货成功！", type: "success" })
                allChecked.value = false
                getCount(2)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {
            form_loading.value = false
        })
}

// 设物流公司
const dialogLogistics = ref(false)
const company_id = ref("")
const clickLogistics = (row) => {
    orderObj.value = row
    dialogLogistics.value = true
    company_id.value = row.company_id || ""
    getCompany()
}
const confirmLogistics = () => {
    if (company_id.value == "") {
        proxy.$message({ message: "请选择物流公司", type: "warning" })
        return
    }
    form_loading.value = true
    proxy.$axios
        .post("order/expressCompany", {
            order_id: orderObj.value.order_id,
            company_id: company_id.value,
        })
        .then((res) => {
            form_loading.value = false
            if (res.data.code == 0) {
                dialogLogistics.value = false
                proxy.$message({ message: "设置物流公司成功！", type: "success" })
                allChecked.value = false
                getCount(2)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {
            form_loading.value = false
        })
}
const closeLogistics = () => {
    dialogLogistics.value = false
    companyArrs.value = []
    ask_type.value = "0"
    form_loading.value = false
}
const companyArrs = ref([])
function getCompany() {
    proxy.$axios
        .get("order/expressCompany")
        .then((res) => {
            if (res.data.code == 0) {
                companyArrs.value = res.data.data
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

// 导出订单
const clickImportOrder = () => {
    proxy.$axios
        .get("order/orderExport", {
            params: {
                status: status.value,
                from: "flower",
                order_sn: order_sn.value,
                contact: addressee.value,
                uid: user_id.value,
                s_day: area_time.value ? area_time.value[0] : "", // 发货时间
                l_day: area_time.value ? area_time.value[1] : "",
                o_s_day: pay_time.value ? pay_time.value[0] : "", // 下单开始时间
                o_l_day: pay_time.value ? pay_time.value[1] : "",
            },
            responseType: "blob",
        })
        .then((res) => {
            let contentDisposition = res.headers["content-disposition"]
            let filename = decodeURI(contentDisposition.split("fileName=")[1] || contentDisposition.split("filename=")[1])
            let blob = new Blob([res.data], { type: res.headers["content-type"] })
            const url = window.URL.createObjectURL(blob)
            const link = document.createElement("a")
            link.href = url
            link.download = filename
            document.body.appendChild(link)
            link.click()
            URL.revokeObjectURL(url) // 释放内存
            document.body.removeChild(link)
        })
        .catch((err) => {})
}

/**
 * 导入/导出商品-批量修改价格/库存
 * @param {Array} fileList_two 上传客户存储数组
 * @param {Boolean} dialogImportGoods 导入客户弹窗状态
 * @param {Function} actionImgUrl 阻止上传地址
 * @param {Function} handleRemove 文件状态移除时的钩子
 * @param {Function} fileChange 文件状态改变时的钩子
 * @param {Function} uploadFile 文件上传
 */
const uploadFileRef = ref(null)
const order_time = ref("")
const kd_user_id = ref("")
const kd_order_sn = ref("")
const fileList_two = ref([])
const dialogImportGoods = ref(false)
const fileChange_two = (file, fileArr) => {
    fileList_two.value = fileArr
}
const handleExceed_two = (files) => {
    uploadFileRef.value.clearFiles()
    const file = files[0]
    file.uid = genFileId()
    uploadFileRef.value.handleStart(file)
}
const handleRemove_two = () => {
    fileList_two.value = []
}
const clickTemplate = () => {
    btn_loading.value = false
    fileList_two.value = []
    dialogImportGoods.value = true
}
// 下载模板
const downExcel = () => {
    if (order_time.value == "") {
        proxy.$message({ message: "请选择订单日期", type: "warning" })
        return
    }
    let days = order_time.value.replace(/-/g, "")
    proxy.$axios
        .get("order/kdExport", {
            params: {
                delivery_day: days,
                uid: kd_user_id.value,
                order_sn: kd_order_sn.value,
            },
            responseType: "blob",
        })
        .then(function (res) {
            let contentDisposition = res.headers["content-disposition"]
            let filename = decodeURI(contentDisposition.split("fileName=")[1] || contentDisposition.split("filename=")[1])
            let blob = new Blob([res.data], { type: res.headers["content-type"] })
            const url = window.URL.createObjectURL(blob)
            const link = document.createElement("a")
            link.href = url
            link.download = filename
            document.body.appendChild(link)
            link.click()
            URL.revokeObjectURL(url) // 释放内存
            document.body.removeChild(link)
        })
        .catch((err) => {})
}
// 上传文件，生成文件路径
const uploadFile = () => {
    if (fileList_two.value.length == 0) {
        proxy.$message({ message: "请选择文件上传", type: "warning" })
        return
    }
    btn_loading.value = true
    let data = new FormData()
    data.append("excel", fileList_two.value[0].raw)
    data.append("type", "check") // [check:校验文件,import:导入文件]
    proxy.$axios
        .post("order/kdImport", data)
        .then((res) => {
            fileList_two.value = []
            if (res.data.code == 0) {
                let result = res.data.data
                confirmUpload(result)
            } else {
                btn_loading.value = false
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {
            btn_loading.value = false
        })
}
// 同样的接口，上传文件路径，最终修改价格
function confirmUpload(params) {
    let data = new FormData()
    data.append("path", params.file)
    data.append("name", params.name)
    data.append("size", params.size)
    data.append("type", "import") // [check:校验文件,import:导入文件]
    proxy.$axios
        .post("order/kdImport", data)
        .then((res) => {
            btn_loading.value = false
            if (res.data.code == 0) {
                uploadFileRef.value.clearFiles()
                dialogImportGoods.value = false
                proxy.$message({ message: "预计1~3分钟同步更新完成，请稍后刷新当前页面！", type: "success" })
                // getStatistics()
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {
            btn_loading.value = false
        })
}
// 图片上传地址
function actionImgUrl() {
    return ""
}

/**
 * 修改地址-暂不做
 * @param {Boolean} dialogAddr 弹窗状态
 * @param {Array} ruleAddrRef 表单规则
 * @param {Object} ruleAddrForm  表单字段
 * @param {Object} ruleCheckAddr  表单提示
 * @param {Function} submitFormAddr 提交表单
 */
// const dialogAddr = ref(false)
// const ruleAddrRef = ref(null)
// const ruleAddrForm = reactive({
//     names: "",
//     tel: "",
//     area_code: [],
//     house: "",
//     lat_lng: [],
// })
// const ruleCheckAddr = reactive({
//     names: [{ required: true, message: "请输入联系人", trigger: "blur" }],
//     tel: [{ required: true, validator: proxy.$util.validPhone, trigger: "blur" }],
//     lat_lng: [{ required: true, type: "array", message: "请选择当前位置的经纬度", trigger: "change" }],
//     area_code: [{ required: true, type: "array", message: "请选择省市区", trigger: "change" }],
//     house: [{ required: true, message: "请输入详细地址", trigger: "blur" }],
// })
// const submitFormAddr = (formEl) => {
//     if (!formEl) return
//     formEl.validate((valid, fields) => {
//         if (valid) {
//             form_loading.value = true
//             let data = {
//                 names: ruleAddrForm.names,
//                 tel: ruleAddrForm.tel,
//                 lat_lng: ruleAddrForm.lat_lng,
//                 province_code: ruleAddrForm.area_code ? ruleAddrForm.area_code[0] : "",
//                 city_code: ruleAddrForm.area_code ? ruleAddrForm.area_code[1] : "",
//                 area_code: ruleAddrForm.area_code ? ruleAddrForm.area_code[2] : "",
//                 house: ruleAddrForm.house,
//             }
//             proxy.$axios
//                 .post("", data)
//                 .then((res) => {
//                     form_loading.value = false
//                     if (res.data.code == 0) {
//                         dialogAddr.value = false
//                         proxy.$message({ message: "修改成功！", type: "success" })
//                         pubParams(getList)
//                     } else {
//                         proxy.$message({message:res.data.msg,type:"error"})
//                     }
//                 })
//                 .catch((err) => {
//                     form_loading.value = false
//                 })
//         }
//     })
// }
// const resetFormAddr = (formEl) => {
//     if (!formEl) return
//     formEl.resetFields()
// }
// const clickEditAddr = (row) => {
//     dialogAddr.value = true
//     setTimeout(() => {
//         ruleAddrForm.names = row.contact
//         ruleAddrForm.tel = row.mobile
//         ruleAddrForm.lat_lng = row.lat_lng
//         ruleAddrForm.area_code = row.area_code
//         ruleAddrForm.house = row.house
//     }, 50)
// }
// const closeAddr = () => {
//     dialogAddr.value = false
//     resetFormAddr(ruleAddrRef.value)
// }

/**
 * 选择省市区
 * @param {Array} allArea 存放省市区数组
 * @param {Object} cascaderRef 容器ref
 * @param {Function} getArea 请求json
 */
const allArea = ref([])
const cascaderRef = ref(null)
const props = {
    label: "name",
    value: "adcode",
    children: "districts",
}
function getArea() {
    proxy.$axios
        .get("gaode-area.json")
        .then((res) => {
            let result = res.data.districts
            allArea.value = result[0].districts
        })
        .catch((err) => {})
}

/**
 * 腾讯地图-根据地址获取经纬度
 * @param {Boolean} dialogMap 地图弹窗
 * @param {String} locations 经纬度地址
 * @param {String} addrs 搜索字段
 * @param {Object} map Map 构造函数创建地图
 * @param {Function} initMap 初始化地图
 */
var map = null,
    marker = null,
    eventDragend = null
const addrs = ref("")
const locations = ref("")
const dialogMap = ref(false)
const handleSearchMap = () => {
    if (addrs.value == "") {
        proxy.$message({ message: "请输入详细地址！", type: "warning" })
        return
    }
    search_btn.value = true
    jsonp("https://apis.map.qq.com/ws/geocoder/v1/?address=", {
        output: "jsonp",
        address: addrs.value,
        key: "RIRBZ-LYM6O-Z73WF-S4A5Z-IEUB5-DXFYZ",
    })
        .then((res) => {
            search_btn.value = false
            if (res.status == 0) {
                locations.value = `${res.result.location.lat},${res.result.location.lng}`
                let center = new qq.maps.LatLng(res.result.location.lat, res.result.location.lng)
                map.panTo(center) // 重新设置地图中心点
                initMap(res.result.location.lat, res.result.location.lng)
            } else {
                proxy.$message({ message: res.message, type: "warning" })
            }
        })
        .catch((err) => {
            search_btn.value = false
        })
}
const clickLatAndLng = () => {
    dialogMap.value = true
    setTimeout(() => {
        initMap()
    }, 50)
}
const confirmMap = () => {
    dialogMap.value = false
    ruleAddrForm.lat_lng = locations.value.split(",")
}
function initMap(lat = 39.90923, lng = 116.397428) {
    let myLatlng = new qq.maps.LatLng(lat, lng)
    let myOptions = {
        zoom: 17,
        center: myLatlng,
    }
    map = new qq.maps.Map(document.getElementById("container"), myOptions)
    marker = new qq.maps.Marker({
        // 设置标记
        position: myLatlng,
        draggable: true,
        animation: qq.maps.MarkerAnimation.DROP,
        map: map,
    })
    eventDragend = qq.maps.event.addListener(marker, "dragend", function (e) {
        // 监听标记拖动
        let latLng = marker.getPosition()
        map.setCenter(latLng)
        let lats = latLng.lat.toFixed(6)
        let lng = latLng.lng.toFixed(6)
        locations.value = `${lats},${lng}`
    })
}

// 标记收货
// const clickReceive = (item) => {
//     proxy.$axios
//         .post("order/finished", {
//             order_id: item.order_id,
//         })
//         .then((res) => {
//             if (res.data.code == 0) {
//                 tabName.value = "8"
//                 status.value = "8"
//                 allChecked.value = false
//                 getCount(2)
//             } else {
//                 proxy.$message({message:res.data.msg,type:"error"})
//             }
//         })
//         .catch((err) => {})
// }

// 取消
const dialogCancel = ref(false)
const cancel_remark = ref("")
const clickCancel = (row) => {
    orderObj.value = row
    dialogCancel.value = true
}
const confirmCancel = () => {
    if (!cancel_remark.value) {
        proxy.$message({ message: "请输入退款/货原因", type: "warning" })
        return
    }
    form_loading.value = true
    proxy.$axios
        .post("order/cancel", {
            order_id: orderObj.value.order_id,
            reason: cancel_remark.value,
        })
        .then((res) => {
            form_loading.value = false
            if (res.data.code == 0) {
                dialogCancel.value = false
                proxy.$message({ message: "操作成功！", type: "success" })
                // tabName.value = "9"
                // status.value = "9"
                allChecked.value = false
                getCount(2)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {
            form_loading.value = false
        })
}
const closeCancel = () => {
    dialogCancel.value = false
    cancel_remark.value = ""
    form_loading.value = false
}

// 设置平台备注
const dialogRemark = ref(false)
const sys_remark = ref("")
const clickRemark = (row) => {
    orderObj.value = row
    dialogRemark.value = true
    sys_remark.value = row.admin_msg || ""
}
const confirmRemark = () => {
    if (!sys_remark.value) {
        proxy.$message({ message: "请输入平台备注", type: "warning" })
        return
    }
    form_loading.value = true
    proxy.$axios
        .post("order/adminMsg", {
            order_id: orderObj.value.order_id,
            admin_msg: sys_remark.value,
        })
        .then((res) => {
            form_loading.value = false
            if (res.data.code == 0) {
                dialogRemark.value = false
                proxy.$message({ message: "设置备注成功！", type: "success" })
                allChecked.value = false
                getCount(2)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {
            form_loading.value = false
        })
}
const closeRemark = () => {
    dialogRemark.value = false
    sys_remark.value = ""
    form_loading.value = false
}

// 设置物流要求
const dialogAsk = ref(false)
const ask_type = ref("0")
const clickAsk = (row) => {
    orderObj.value = row
    dialogAsk.value = true
    ask_type.value = String(row.express_require || 0)
}
const confirmAsk = () => {
    form_loading.value = true
    proxy.$axios
        .post("order/expressRequire", {
            order_id: orderObj.value.order_id,
            express_require: ask_type.value,
        })
        .then((res) => {
            form_loading.value = false
            if (res.data.code == 0) {
                dialogAsk.value = false
                proxy.$message({ message: "设置物流要求成功！", type: "success" })
                allChecked.value = false
                getCount(2)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {
            form_loading.value = false
        })
}
const closeAsk = () => {
    dialogAsk.value = false
    ask_type.value = "0"
    form_loading.value = false
}

// 删除单个
const clickDel = (row) => {
    postDel(row.order_id)
}
// 删除接口
function postDel(params) {
    proxy.$axios
        .post("order/delete", {
            order_id: params,
        })
        .then((res) => {
            if (res.data.code == 0) {
                proxy.$message({ message: "删除成功！", type: "success" })
                getCount(3)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

const clickDetail = (row) => {
    router.push({
        path: "/Order/OrderDetail",
        query: {
            oid: row.order_id,
        },
    })
}

const disabledDate = (time) => {
    return time.getTime() > Date.now()
}
</script>
<script>
export default {
    name: "OrderList",
}
</script>

<style lang="less" scoped>
.good-more {
    width: 100%;
    // box-shadow: rgb(240 240 240) 0px -2px 6px;
    background: #fff;

    .good-more_line {
        padding-top: 4px;
        height: 20px;
    }
    span {
        font-size: @font-size-md;
        color: @gray-7;
        margin-left: 6px;
        cursor: pointer;
    }
    .el-icon {
        cursor: pointer;
        transition: all 0.5s;
    }
    .good-more-icon {
        transform: rotate(-180deg) !important;
    }
}
.table-body__none {
    text-align: center;
    color: #909399;
    font-size: @font-size-md;
    padding-bottom: 20px;
}
.kd-h3 {
    margin-bottom: @margin-sm;
    color: @gray-8;
    font-weight: bold;
}
.kd-tips {
    margin-left: -10px;
    color: @gray-7;
}
.downs {
    margin-left: @margin-sm;
}
:deep(.el-upload-list) {
    width: 460px;
}
.dialog-h3 {
    font-size: @font-size-md;
    color: #333;
    margin-bottom: @margin-lg;
    p {
        line-height: 24px;
        margin-bottom: @margin-base;
        &.dialog-h3-title {
            margin-bottom: @margin-xs;
            font-weight: bold;
        }
    }
    a,
    .span-down {
        color: #409eff;
        cursor: pointer;
    }
}
#container {
    width: 100%;
    height: 400px;
}
.table-lr__img {
    width: 40px !important;
    height: 40px !important;
}
.table-lr__right {
    min-height: 40px !important;
}
.table-right-other {
    min-height: 20px !important;
}
.table-sub__p-mb {
    line-height: 20px;
}
.table-head {
    background-color: #f5f7fa;
    width: 100%;
    height: 50px;
    border-radius: @radius-sm;
    border: 1px solid #ebeef5;
    overflow: hidden;
    margin-bottom: @margin-sm;
    padding: 0px @padding-md;
}

.table-body {
    margin-bottom: @margin-xl;
    min-height: 40px;
    .table-item {
        border: 1px solid #ebeef5;
        margin-bottom: @margin-sm;
        .table-item-head {
            background-color: #f5f7fa;
            width: 100%;
            height: 46px;
            overflow: hidden;
            padding: 0px @padding-md;
            border-bottom: 1px solid #ebeef5;
            .table-item__head-left {
                display: flex;
                align-items: center;
                .item-head__sn {
                    font-size: @font-size-md;
                    font-weight: bold;
                    color: @gray-8;
                    margin-right: @margin-mdl;
                    flex: none;
                }
                .item-head__text {
                    font-size: @font-size-md;
                    color: @gray-8;
                    margin-right: @margin-mdl;
                    flex: none;
                    span {
                        color: @themes;
                    }
                }
            }
        }
        .table-item-cont {
            display: flex;
            & > div {
                // padding: @padding-md @padding-xs;
                padding: 12px 8px;
                font-weight: 500;
                text-align: left;
                &:last-child {
                    text-align: left;
                    .el-button {
                        margin: 0 @margin-sm @margin-xs 0;
                    }
                }
            }
            .table-sub {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                overflow: hidden;
            }
            .table-sub-btn {
                flex-flow: row wrap;
                justify-content: flex-start;
                align-content: center;
            }
            .table-good {
                text-align: left;
            }
            .table-lr {
                margin-bottom: @margin-xs;
                &:last-child {
                    margin-bottom: 0;
                }
            }
            .item-cont__base {
                border-right: 1px solid #ebeef5;
            }
        }
    }
}
.table-body {
    text-align: center;
    font-size: @font-size-md;
    line-height: 40px;
    color: @gray-7;
}

.table-check {
    flex: none;
    margin-right: @margin-base;
}

.table-good {
    flex: 1;
}

.table-price {
    width: 13.5%;
    flex: none;
    text-align: left;
}
.table-pay-type {
    width: 13%;
    flex: none;
    text-align: left;
}
.table-buy-info {
    width: 14%;
    flex: none;
    text-align: left;
}
.table-oper {
    width: 15%;
    flex: none;
}
.table-head-base {
    font-size: @font-size-md;
    font-weight: 700;
    color: @gray-8;
    padding: 0px @margin-xs;
}
:deep(.el-checkbox__inner) {
    width: 16px;
    height: 16px;

    &::after {
        width: 3px;
        height: 7px;
        left: 5px;
        top: 2px;
    }
}
.tag-item {
    display: flex;
    align-items: center;
    margin-bottom: @margin-xs;
    line-height: 32px;
    .tag-item__label {
        flex: none;
        text-align: right;
        width: 140px;
        padding-right: @padding-md;
        font-size: @font-size-md;
        color: @gray-8;
        line-height: 32px;
    }

    .tag-item__right {
        flex: none;
        width: 340px;
    }
}
.batch-oper {
    margin-top: @margin-xs;
    margin-bottom: @margin-lg;
}
:deep(.el-tabs) {
    .el-tabs__header {
        box-sizing: content-box;
    }
    .el-tabs__item {
        background: #f7f8fa;
        border-bottom: 1px solid #e4e7ed;
        &.is-active {
            color: #303133;
            background: #fff;
        }
    }
}
</style>
